<template>
    <div class="affirminist">
        <div class="width-center">
            <!-- 头部导航栏 -->
            <search></search>
            <!-- 状态显示栏 -->
            <div class="state">
                <div class="plan">
                    <Steps :current="current">
                        <Step title="提交订单"></Step>
                        <Step title="支付"></Step>
                        <Step title="完成订单" style="width : 100px"></Step>
                    </Steps>
                </div> 
            </div>
            <!-- 订单提交成功 显示金额 -->
            <div class="money-hint">
                <img src="../assets/img/state.png">
                <div class="tjtime">
                    <p class="font-w">订单提交成功，还有一步就完成了！</p>
                    <div class="orange">
                        <div class="xstime">请您在确认订单后<span>24小时</span>内完成支付，否则订单将会自动取消</div>
                        <div class="xsmoney">
                            <span>共{{proCount}}件商品，总计</span>
                            <span class="twenty">¥ {{orderAmount}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 支付类型 -->
            <div class="pay-type" @click="paytype(0)">
                <img src="../assets/img/alipay_H.png" class="zfbshow" v-if="paytypeimg != 0">
                <img src="../assets/img/alipay_N.png" class="zfbhide" v-if="paytypeimg != 0">
                <img src="../assets/img/alipay_H.png" v-if="paytypeimg == 0">
                <span>支付宝支付</span>
            </div>
            <div class="pay-type" @click="paytype(1)">
                <img src="../assets/img/WeChat_H.png" class="zfbshow" v-if="paytypeimg != 1">
                <img src="../assets/img/WeChat_N.png" class="zfbhide" v-if="paytypeimg != 1">
                <img src="../assets/img/WeChat_H.png" v-if="paytypeimg == 1">
                
                <span>微信支付</span>
            </div>
            <div class="wyzf" @click.stop="paytype(2)">
                <div class="pay-type mar-bott"  @click="bankifyclick">
                    <img src="../assets/img/bank_H.png" class="zfbshow" v-if="paytypeimg != 2">
                    <img src="../assets/img/bank_N.png" class="zfbhide" v-if="paytypeimg != 2">
                    <img src="../assets/img/bank_H.png" v-if="paytypeimg == 2">
                    
                    <span>网银支付</span>
                    <!-- <img src="../assets/img/pullDown_nor.png" class="pulldown"> -->
                    <Icon type="chevron-down" class="pulldown" v-if="bankdown"></Icon>
                    <Icon type="chevron-up" class="pulldown" v-if="bankup"></Icon>
                </div>
                <div class="bankclassify" v-if="bankify">
                    <ul>
                        <li class="wy" @click="Internetbank(1)">
                            <img src="../assets/img/urcb_H.png" class="wyshow" v-if="Internetbankimg !=1">
                            <img src="../assets/img/urcb_N.png" class="wyhide" v-if="Internetbankimg !=1">
                            <img src="../assets/img/urcb_H.png"  v-if="Internetbankimg ==1">                            
                        </li>
                        <li class="wy" @click="Internetbank(2)">
                            <img src="../assets/img/abc_H.png" class="wyshow" v-if="Internetbankimg !=2">
                            <img src="../assets/img/abc_N.png" class="wyhide" v-if="Internetbankimg !=2">
                            <img src="../assets/img/abc_H.png"  v-if="Internetbankimg ==2">
                        </li>
                        <li class="wy" @click="Internetbank(3)">
                            <img src="../assets/img/icbc_H.png" class="wyshow" v-if="Internetbankimg !=3">
                            <img src="../assets/img/icbc_N.png" class="wyhide" v-if="Internetbankimg !=3">
                            <img src="../assets/img/icbc_H.png"  v-if="Internetbankimg ==3">
                        </li>
                        <li class="wy" @click="Internetbank(4)">
                            <img src="../assets/img/boc_H.png" class="wyshow" v-if="Internetbankimg !=4">
                            <img src="../assets/img/boc_N.png" class="wyhide" v-if="Internetbankimg !=4">
                            <img src="../assets/img/boc_H.png"  v-if="Internetbankimg ==4">
                        </li>
                        <li class="wy" @click="Internetbank(5)">
                            <img src="../assets/img/cmbc_H.png" class="wyshow" v-if="Internetbankimg !=5">
                            <img src="../assets/img/cmbc_N.png" class="wyhide" v-if="Internetbankimg !=5">
                            <img src="../assets/img/cmbc_H.png"  v-if="Internetbankimg ==5">
                        </li>
                    </ul>
                </div>
            </div>       
            <!-- 支付按钮 -->
            <div class="pay-button">
                <div class="cancel" @click="wicketcl = true">取消支付</div>
                <div class="success" @click="makesurezf">确认并付款</div>
            </div>
            <!-- 删除弹框 -->
            <Modal :visible.sync="wicketcl" :content="qxmsg" @determine="affirmpay"></Modal>
            <!-- 确认支付 -->
            <div class="affirmpay" v-if="affirmimg">
                <div class="affirmpay-img">
                    <Icon type="android-close" class="affficon" @click.native="affirmimg = false"></Icon>
                </div>
            </div>
        </div>    
        <!-- 支付宝接口    -->
        <div id="payForm" style="display:block" v-html="formStr">  
        </div>
        <!-- 微信支付图片 -->
        <div class="wepay" v-if="wepay">
            <div class="wepaybg" @click="wepay = false"></div>
            <div class="wecontent">
                <Icon type="android-close" class="wepayIcon" @click.native="wepay = false"></Icon>
                <div class="payimg" :style="`background-image:url(${wepaydata.data.twoImgPath})`"></div>
                <p>请使用微信扫描二维码支付订单</p>
            </div>
        </div>
    </div>        
</template>


<script>
import Search from "../components/search"
import Modal from "../components/modal"
import {Icon,Steps,Step} from "iview"
import {orderPay,orderBatchNumber,orderCommit,registpay,wxRepay,orderCancel} from "../http/api"
export default {
    components: {
      Search,
      Modal,
      Icon,
      Steps,
      Step
    },
    data () {
        return {
            bankify:false,      //网银隐藏部分
            paytypeimg:-1,        // 支付类型图片显示
            Internetbankimg:-1,  //网银支付图片显示
            wicketcl:false,     //删除弹窗
            bankdown:true,
            bankup:false,
            affirmimg:false,     //确认支付弹窗
            qxmsg:"确定要取消支付吗？",
            current:1,      //进度条
            proCount:"",
            orderAmount:"", // 金钱
            formStr: "",
            wepay:false,   //微信支付图片弹窗
            wepaydata:null, //微信返回数据
        }
    },
    computed: {

    },
    methods: {
        // 点击网银出现选择
        bankifyclick () {
            this.bankify = !this.bankify
            this.bankup = !this.bankup
            this.bankdown = !this.bankdown
        },
        //支付类型
        paytype (index) {
            this.paytypeimg = index
        },
        //网银支付图片类型
        Internetbank(index){
            this.Internetbankimg = index
        },
        //取消支付
        affirmpay () {
            this.$router.push({path:"/personal/myorder"})
        },
        //支付接口
        makesurezf () {   
            // 判断是一个订单还是多个订单，转换字符串
            let odss
            if(typeof(this.oids) == "object"){
                odss = this.oids.join()
            }else{
                odss = this.oids
            }
            // 判断是否选择了支付方式
            if(this.paytypeimg == -1){
                this.$Message.info('请选择支付方式');
            }else if(this.paytypeimg == 0){
                // orderPay({oids:this.oids,payType:this.paytypeimg,batchNumber:this.batchNumber}).then(res=>{
                    
                // })
                if(Number(this.orderAmount) >10000){
                    this.$Message.success({
                        content: "支付宝支付单笔不能超过10000！",
                        duration: 1.5
                    });
                }else{
                    // let odss = this.oids.join()
                    // 支付宝接口
                    registpay({orderNos:odss}).then(res=>{                     
                        this.formStr = res.data;
                        this.$nextTick(() => {
                            document.forms[0].submit();
                        })  
                    })
                }           
            }else if(this.paytypeimg == 1){
                if(Number(this.orderAmount) >10000){
                    this.$Message.success({
                        content: "微信支付单笔不能超过10000！",
                        duration: 1.5
                    });
                }else{
                    // 微信支付
                    wxRepay({orderNos:odss}).then(res=>{
                        if(res.data.status == 1000){
                            if(res.data.data.twoImgPath){
                                this.wepay = true
                                console.log(res.data.data.twoImgPath)
                            }           
                            this.wepaydata = res.data
                        }
                    })
                }   
                }
                
            // this.$router.push({path:"/wypayconfirm"})
            
        }
    },
    created () {
        // orderBatchNumber().then(res=>{
        //     this.batchNumber = res.data.bacthNumber
        // })  
        this.proCount = this.$route.query.proCount
        this.orderAmount = this.$route.query.orderAmount
        this.oids = this.$route.query.oids
    }, 
}
</script>

<style lang="less">
@import "../assets/styles/affirminist.less";
</style>
